<span (click)="sort()" class="sort-clickable">
  <i
    class="datatable-svg"
    [ngClass]="{
      'sort-icon-default': !sortDirection,
      'sort-icon-asc': sortDirection === 'ASC',
      'sort-icon-desc': sortDirection === 'DESC',
      'sort-icon-default-visible': showSortIcon
    }"
  >
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <circle id="sort-svg-path-1" cx="8" cy="8" r="8"></circle>
        <filter x="-34.4%" y="-21.9%" width="168.8%" height="168.8%" filterUnits="objectBoundingBox" id="filter-2">
          <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
          <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
          <feColorMatrix
            values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.085309222 0"
            type="matrix"
            in="shadowBlurOuter1"
          ></feColorMatrix>
        </filter>
      </defs>
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <use fill-rule="evenodd" xlink:href="#sort-svg-path-1"></use>
        <polygon points="8 4 11 7 5 7"></polygon>
        <polygon points="8 12 5 9 11 9"></polygon>
      </g>
    </svg>
  </i>
</span>
